<template>
  <div class="detail-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="信息详情" name="first">
        <div class="tab-body">
          <div class="base-info-tab-item" v-if="dataInfo.remark.length">
            <!-- {{ dataInfo.remark }} -->
            <div v-for="rem in dataInfo.remark" :key="rem">{{ rem }}</div>
            <!-- {{ aaa }} -->
            <!-- {{  }} -->
            <!-- <div></div> -->
            <!-- <div>
              <label>岩性：</label> <span>{{ item["rockname"] }}</span>
            </div>
            <div>
              <label>层名：</label> <span>{{ item["horizon"] }}</span>
            </div>
            <div>
              <label>描述：</label> <span>{{ item["describe"] }}</span>
            </div>
            <div>
              <label>累深：</label> <span>{{ item["adddepth"] }}</span>
            </div> -->
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文件列表" name="third">
        <div class="tab-body">
          <div
            class="line-file-list-item"
            v-for="(item, index) in pdfList"
            :key="index"
          >
            <label>01韩家湾瞬变电磁探测成果报告.pdf</label>
            <el-button type="primary" @click="showPdf" size="mini"
              >预览</el-button
            >
          </div>
          <div
            class="line-file-list-item"
            v-for="item in fileInfo"
            :key="item.name"
          >
            <label>{{ item.name }}{{ item.type }}</label>
            <el-button type="warning" @click="downFiles(item)" size="mini"
              >下载</el-button
            >
          </div>
          <div
            class="line-file-list-item-img"
            v-for="item in imgInfo"
            :key="item.name"
          >
            <div class="item-img-info">
              <span>{{ item.name }}</span>
              <span>
                <i class="el-icon-view" @click="showTheImg(item)"></i>
                <i
                  class="el-icon-download"
                  v-if="region !== 'guest'"
                  @click="downFiles(item)"
                ></i>
              </span>
            </div>
            <el-image fit="contain" :src="item.url">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="pdf-body" v-if="pdfurl">
      <div class="pdf-body-cooper">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            size="mini"
            @click="prePage"
            >上一页</el-button
          >
          <el-button type="primary" size="mini" @click="nextPage"
            >下一页<i class="el-icon-arrow-right el-icon--right"></i
          ></el-button>
        </el-button-group>
        <div style="margintop: 10px; color: #409eff">
          {{ pageNum }} / {{ pageTotalNum }}
        </div>
      </div>
      <div class="pdf-color">
        <i class="el-icon-close" @click="closePdf" />
      </div>
      <div style="width: 40vw; height: 98vh">
        <pdf
          :page="pageNum"
          :src="pdfurl"
          @progress="loadedRatio = $event"
          @num-pages="pageTotalNum = $event"
        ></pdf>
      </div>

      <!-- <pdf ref="pdf" :src="pdfurl" style="display: inline-block; width: 25%"> -->
      <!-- </pdf> -->
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

import DxCommonUtils from "@/utils/cesiumDxUtils/common3D";
import { getRole } from "@/utils/auth";

export default {
  name: "DrillingDetail",
  props: {
    dataInfo: {
      type: Object,
      default: () => {},
    },
    fileInfo: {
      type: Array,
      default: () => [],
    },
    pdfList: {
      type: Array,
      default: () => [],
    },
    imgInfo: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    pdf,
  },
  data() {
    return {
      pageNum: 1,
      pageTotalNum: 1, // # 总页数
      loadedRatio: 0, //  # 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了

      numPages: null, // pdf 总页数
      pdfurl: null, // "@/assets/dataImg/01韩家湾瞬变电磁探测成果报告.pdf",
      activeName: "first",
      url: "",
      srcList: [],
      imgList: [],
      filesList: [],
      region: getRole(),
      baseInfo: [
        {
          label: "项目名称",
          value: "中国地质测绘02项目",
        },
        {
          label: "项目编号",
          value: "AAr234trq4-dfadv",
        },
        {
          label: "转孔名称",
          value: "浔阳江头夜送客，枫叶荻花秋瑟瑟",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {},
    showTheImg(data) {
      this.$openPreview([data.url]);
    },
    // 文件下载
    downFiles(data) {
      const region = this.$store.getters.region;
      if (region === "guest") {
        this.$notify({
          title: "警告",
          message: "暂不提供下载",
          type: "warning",
        });
        return;
      }
      window.open(data.url);
      // DxCommonUtils.downloadElement(
      //   "../../..//assets/dataImg/BK1钻孔综合柱状图.dwg"
      // );
    },
    // 打开pdf
    showPdf() {
      this.pdfurl =
        "http://106.12.254.129:39895/data/file/01%E9%9F%A9%E5%AE%B6%E6%B9%BE%E7%9E%AC%E5%8F%98%E7%94%B5%E7%A3%81%E6%8E%A2%E6%B5%8B%E6%88%90%E6%9E%9C%E6%8A%A5%E5%91%8A.pdf";
      this.getNumPages();
    },
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfurl);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },

    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    closePdf() {
      this.pdfurl = null;
    },
  },
  mounted() {
    this.region = getRole();
  },
};
</script>

<style lang="scss" scoped>
.line-file-list-item-img {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  line-height: 40px;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.48);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  .item-img-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    line-height: 40px;
    width: 100%;
    & > span:first-child {
      width: 80%;
      overflow: hidden;
    }
    & > span:last-child {
      width: 20%;
      text-align: right;
      i {
        margin: 0 4px;
        font-size: 16px;
        cursor: pointer;
        color: #ffffff;
      }
      i:hover {
        color: #1890ff;
      }
    }
  }
  img {
    border-radius: 6px;
    overflow: hidden;
  }
}
.pdf-body {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
  width: 100vw;
  height: 100vh;
  z-index: 4000;
  background-color: #817d7d;
  display: flex;
  justify-content: center;
  align-items: center;
  .pdf-body-cooper {
    position: absolute;
    top: 0;
    left: 0;
  }
  .pdf-color {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
  }
}
.detail-container {
  width: 100%;
  height: 100%;
}
.detail-container .tab-body {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.line-file-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.48);
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 6px;
  label {
    font-weight: 100;
  }
}
.detail-container .tab-body .base-info-tab-item {
  // height: 50px;
  line-height: 30px;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(24, 116, 205, 0.48);
  margin: 10px 0;
  padding: 10px;
  border-radius: 6px;
  & > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
  }
  & > div > label {
    width: 60px;
    text-align: right;
    color: #f2f2f2;
    letter-spacing: 2px;
    font-weight: 100;
    font-size: 14px;
  }
  & > div > span {
    display: inline-block;
    width: 210px;
    padding-left: 6px;
    color: #ccc;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
</style>
<style>
.detail-container .el-tabs__item {
  color: #ccc;
}
.detail-container .el-tabs__item.is-active {
  color: #1890ff;
}
.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #ccc;
}
.detail-container .el-tabs__active-bar {
  height: 1px;
}
.detail-container .el-tabs,
.detail-container .el-tab-pane,
.detail-container .el-carousel,
.detail-container .el-carousel__container {
  height: 100%;
}
.detail-container .el-tabs__content {
  height: calc(100% - 70px);
}
/* .el-image {
  width: 100%;
  height: 100%;
} */
.el-image > img {
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  /* height: auto; */
}
</style>